<template>
    <view>
        <div class="flow-table-container">
            <!-- 检索区域 -->
            <div class="search-area">
                <div class="search-item">
                    <a-input :style="{ minWidth: '240px' }" v-model:model-value="flowName" placeholder="输入关键词"
                        allow-clear :max-length="16">
                        <template #prefix> <icon-search /> </template>
                    </a-input>
                </div>
                <div class="btns-list">
                    <a-button style="width: 120px;" type="primary" @click="onFlowCreate()">
                        新建事件
                        <template #icon> <icon-plus /> </template>
                    </a-button>
                </div>
            </div>
            <div class="flow-table-main">

                <div class="flow-table-content">
                    <a-table :scrollbar="false" :bordered="false" :hoverable="false" :data="tableData"
                        :expandable="expandableConfig" :pagination="false" :loading="tableLoading"
                        @page-change="reqData()" @filter-change="filterChange"
                        :scroll="{ maxHeight: 'calc(100vh - 227px)', x: 1000 }">
                        <template #expandedRowRender="{ record }">
                            <p>这里是展开内容，例如详细信息：{{ record.detail }}</p>
                        </template>
                        <template #columns>
                            <a-table-column title="事件ID" data-index="eventId"></a-table-column>
                            <a-table-column title="事件名称" data-index="eventName"></a-table-column>
                            <a-table-column title="事件优先级" data-index="priority">
                                <template #cell="{ record }">
                                    <a-tag>{{ record.priority }}</a-tag>
                                </template>
                            </a-table-column>
                            <a-table-column title="事件范围" data-index="eventRange">

                            </a-table-column>
                            <a-table-column title="状态" width="100" data-index="status" :filterable="statusFilter">

                                <template #cell="{ record }">
                                    <!--执行状态-->
                                    <a-tag color="green" v-if="record.status">启用</a-tag>
                                    <a-tag color="red" v-else>停用</a-tag>
                                </template>
                            </a-table-column>
                            <a-table-column title="调用方式" data-index="isAsync">

                                <template #cell="{ record }">

                                    <a-tag v-if="record.isAsync">
                                        <FlowIcon name="async" width="25px" height="25px"></FlowIcon>
                                    </a-tag>

                                    <a-tag v-else="record.isAsync">
                                        <FlowIcon name="sync" width="25px" height="25px"></FlowIcon>
                                    </a-tag>
                                </template>
                            </a-table-column>
                            <a-table-column title="流程定义" :width="100">

                                <template #cell="{ record }">
                                    <a-popover title="流程定义">
                                        <template #content>
                                            <JsonEditor style="width: 400px;" v-model:value="record.flowDefine"
                                                readOnly>
                                            </JsonEditor>
                                        </template>
                                        <a-button>查看</a-button>
                                    </a-popover>
                                </template>

                            </a-table-column>

                            <a-table-column title="更新时间" data-index="updatedTime" :width="170"></a-table-column>
                            <a-table-column title="操作" :width="240" fixed="right">

                                <template #cell="{ record }">
                                    <a-tooltip
                                        content="This is a two-line tooltip content.This is a two-line tooltip content.">
                                        <a-button>删除</a-button>
                                    </a-tooltip>

                                </template>
                            </a-table-column>
                        </template>
                    </a-table>
                </div>
                <div class="fenye" v-if="query.total > 0">
                    <a-pagination show-total @change="reqData()" :total="query.total" :page-size="query.pageSize"
                        :current="query.pageNum" />
                </div>
            </div>
        </div>

    </view>
</template>

<script setup>
import useApp from '@/hooks';
const { $ } = useApp();
import {Table as ATable } from "ant-design-vue";
import { IconSearch, IconPlus, IconDelete, IconEdit, IconStop, IconCheckCircle } from "@arco-design/web-vue/es/icon";
import { createOne, updateOne, queryOne, queryList } from "@/api/FlowEvent";
const tableData = ref([])
const tableLoading = ref(false)
const expandableConfig = {
  expandedRowRender: record => record.detail,
  rowExpandable: record => record.name !== 'Not Expandable',
};
const query = ref({
    total: 0,
    pageSize: 10,
    pageNum: 1
})
function filterChange(e, d) {
    console.log(e)
    console.log(d)
}
const statusFilter = ref({
    filters: [{
        text: '启用',
        value: 1,
    }, {
        text: '禁用',
        value: 0,
    }],
})
function reqData() {
    tableLoading.value = true;
    queryList(query.value).then(res => {
        console.log(res.content)
        tableLoading.value = false;
        tableData.value = res.content;
        query.value.total = res.totalElements;
    })
}
reqData();
</script>

<style lang="less" scoped>
@import "@/styles/ftable.less";
</style>